/*
* @Author: wangliang
* @Date: 2018/4/11
* @description: 财务信息
*/
<template>
    <div class="custom-box p-20">
        <el-row>
            <el-col :span="5" class="ca-title">
                <h3>财务信息 ({{totalCount}})</h3>
                <button type="button" 
                    class="custom-btn custom-btn-round m-l-15"
                    @click="add()">
                    <i class="fa fa-plus"></i>
                </button>
            </el-col>
        </el-row>
        <el-table
            ref="multipleTable"
            :data="data"
            stripe
            style="width: 100%">
            <el-table-column
                label="ID"
                prop="id"
                align="center">
            </el-table-column>
            <el-table-column
                label="财报年份"
                align="center">
                <template slot-scope="scope">
                    {{scope.row.startTime | cmsMoment}}至{{scope.row.endTime | cmsMoment}}
                </template>
            </el-table-column>
            <el-table-column
                label="财报类型"
                prop="financeType"
                align="center">
                <template slot-scope="scope">
                    {{scope.row.financeType | getNameById('financeReportType')}}
                </template>
            </el-table-column>
            <el-table-column
                label="报表类型"
                prop="reportType"
                align="center">
                <template slot-scope="scope">
                    {{scope.row.reportType | getNameById('financeReportFormType')}}
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center">
                <template slot-scope="scope">
                    <el-button  type="text" @click="edit(scope.row.id)">编辑</el-button>
                    <el-button  type="text" @click="deleteId(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="m-t-20" >
            <el-pagination
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :current-page="pageParam.pageIndex"
                :page-size="10"
                :total="totalCount">
            </el-pagination>
        </div>
        <!-- 编辑财务信息 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :show-close="false" width="65%">
            <h3 class="m-b-20 f-s-10">财务概况</h3>
            <el-form :model="comFinance" :rules="rules" ref="financeForm" class="border">
                <el-row>
                    <el-col :span="12">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="开始时间" label-width="80px" prop="startTime">
                                    <el-date-picker
                                    v-model="comFinance.startTime"
                                    type="date"
                                    placeholder="选择日期"
                                    style="width:100%">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="结束时间" label-width="80px" prop="endTime">
                                    <el-date-picker
                                    v-model="comFinance.endTime"
                                    type="date"
                                    placeholder="选择日期"
                                    style="width:100%">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="报表类型" label-width="80px" prop="reportType">
                                    <el-select v-model="comFinance.reportType" placeholder="请选择">
                                        <el-option
                                        v-for="(item, index) in dropDown.financeReportFormType"
                                        :key="index"
                                        :label="item.dictName"
                                        :value="Number(item.dictValue)">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="财报类型" label-width="80px" prop="financeType">
                                    <el-select v-model="comFinance.financeType" placeholder="请选择">
                                        <el-option
                                        v-for="(item, index) in dropDown.financeReportType"
                                        :key="index"
                                        :label="item.dictName"
                                        :value="Number(item.dictValue)">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="币种" label-width="80px">
                            <el-select v-model="comFinance.currencyType" placeholder="请选择" style="width: 100%">
                                <el-option
                                v-for="(item, index) in dropDown.currencyType"
                                :key="index"
                                :label="item.dictName"
                                :value="Number(item.dictValue)">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="资产总计" label-width="80px">
                            <el-input type="number" v-model="comFinance.assets"></el-input>
                        </el-form-item>
                        <el-form-item label="负债总计" label-width="80px">
                            <el-input type="number" v-model="comFinance.debt"></el-input>
                        </el-form-item>
                        <el-form-item label="净资产" label-width="80px">
                            <el-input type="number" v-model="comFinance.netAssets"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="归属母公司净资产" label-width="100px" class="line-h-20">
                            <el-input type="number" v-model="comFinance.parentAsset"></el-input>
                        </el-form-item>
                        <el-form-item label="营业收入" label-width="100px">
                            <el-input type="number" v-model="comFinance.businessIncome"></el-input>
                        </el-form-item>
                        <el-form-item label="利润总额" label-width="100px">
                            <el-input type="number" v-model="comFinance.totalProfit"></el-input>
                        </el-form-item>
                        <el-form-item label="营业利润" label-width="100px">
                            <el-input type="number" v-model="comFinance.operatingProfit"></el-input>
                        </el-form-item>
                        <el-form-item label="净利润" label-width="100px">
                            <el-input type="number" v-model="comFinance.netProfit"></el-input>
                        </el-form-item>
                        <el-form-item label="归属母公司所有者的净利润" label-width="100px" class="line-h-20">
                            <el-input type="number" v-model="comFinance.parentNetProfit"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <h3 class="m-t-20 m-b-20 f-s-10">审计公司</h3>
            <el-form>
                <el-row :gutter="5">
                    <el-col :span="10">
                        <el-form-item label="审计公司" label-width="90px">
                            <el-input v-model="companyName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="" label-width="0px">
                            <el-button type="primary" @click="compamyDialog = true">搜索</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="" label-width="0px">
                            <upLoad
                            :title="'人工上传'"
                            @onSuccess="onSuccessMultiple"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="" label-width="0px">
                            <el-button type="primary" @click="autoDownload">自动下载</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-dialog :visible.sync="autoDownloadDialog" title="自动下载" append-to-body>
                <el-form label-width="120px">
                    <el-row>
                        <el-form-item label="报告题目">
                            <el-input v-model="fileName"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="报告URL">
                            <el-input v-model="fileUrl"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row class="align-center">
                        <el-button type="primary" round @click="automaticUploadFile">确定</el-button>
                        <el-button type="primary" round @click="autoDownloadDialog = false">取消</el-button>
                    </el-row>
                </el-form>
            </el-dialog>
            <CompanyList 
            :companyDetailDialog="compamyDialog"
            @getName="getName"
            @closeCompanyDialog="closeCompanyDialog"/>
            <el-table
            :data="auditList"
            border
            style="width: 80%;margin-left:10%;"
            >
            <el-table-column
                prop="reportUrl"
                label="报告ID"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="reportName"
                label="报告名称"
                align="center"
                >
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                >
                <template slot-scope="scope">
                    <el-button  type="text" @click="downFile(scope.row.reportName, scope.row.reportUrl)">下载</el-button>
                    <el-button  type="text" @click="delFile(scope.row.id, scope.$index)">删除</el-button>
                </template>
            </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer" align="center">
                <el-button type="primary" round @click="saveInfo()">保存</el-button>
                <el-button round @click="close()">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Watch } from 'vue-property-decorator';
import FinanceService from '../../../../../service/subject/company/finance-info/index';
import { ComFinanceDto, ComFinanceAuditDto, PageParam } from '../../../../../api/Interface';
import CompanyInfo from '../../../../../components/company-info/index.vue';
import Upload from '../../../../../components/upload/index.vue';
import commonService from '../../../../../service/common/index';
import Api from '../../../../../api/common/commonController.api';
import getUrl from '../../../../../service/getUrl';
interface CompanyName {
    name: string;
    id: number;
}
@Component({
    components: {
        CompanyList: CompanyInfo, // 企业库
        upLoad: Upload, // 文件上传
    }
})
export default class BasicInfo extends Vue {
    // 初始化数据 相当于data
    // public msg: number = 123;
    public comFinance: ComFinanceDto = {} as ComFinanceDto; // <PersonVo> {}
    public pageParam: PageParam = {pageIndex: 1, pageSize: 10} as PageParam; // <PersonVo> {}
    public dialogTitle: string = '财务信息/添加财务信息';
    public status: string = '添加';
    public data: object[] = []; // 财务信息列表
    public compamyDialog: boolean = false; // 企业库
    public companyName: string = ''; // 审计公司名称
    public companyId: string = ''; // 审计公司id
    public auditList: ComFinanceAuditDto[] = []; // 审计公司
    public totalCount: number = 0; // 总数
    public autoDownloadDialog: boolean = false;
    public fileName: string = '';
    public fileUrl: string = '';
    public inputValue: string = '';
    public dialogVisible: boolean = false;
    public valueTime: string = '';
    public rules = {
        startTime: [ { required: true, message: '请选择开始时间', trigger: 'change' } ],
        endTime: [ { required: true, message: '请选择结束时间', trigger: 'change' } ],
        reportType: [ { required: true, message: '请选择报表类型', trigger: 'change' } ],
        financeType: [ { required: true, message: '请选择财报类型', trigger: 'change' } ],
    };
    public dropDown: object = {
        financeReportFormType: this.$store.state.user.dictionary.dicList.financeReportFormType, // 报表类型
        financeReportType: this.$store.state.user.dictionary.dicList.financeReportType, // 财报类型
        currencyType: this.$store.state.user.dictionary.dicList.currencyType, // 币种
    };
    // refs
    public $refs: {
        financeForm: HTMLFormElement
    };

    // watch
    @Watch('msg')
    public onChildChanged(val: string, oldVal: string) {
        return val + '***';
    }

    // 声明周期钩子
    public mounted() {
        this.getFinanceList();
    }

    // 方法
    // 打开自动下载报告
    public autoDownload() {
        this.autoDownloadDialog = true;
        this.fileName = '';
        this.fileUrl = '';
    }
    // 自动下载
    public async automaticUploadFile() {
        const res = await commonService.automaticUploadFile(this.fileName, this.fileUrl);
        if (res.resCode === '0') {
            this.auditList.push({
                accountantId: this.companyId, // 审计公司(会计事务所id)
                companyId: Number(this.$route.params.itemId), // 工商主id
                reportName: res.data.fileName, // 报告名称
                financeId: 0, // 财务id
                id: 0, // id
                reportUrl: res.data.fileUrl, // 报告在服务器路径
                accountantName: this.companyName, // 审计公司名字
            });
            this.autoDownloadDialog = false;
        }
    }
    // 更改页码
    public handleCurrentChange(val: number) {
        this.pageParam.pageIndex = val;
        this.getFinanceList();
    }
    // 添加
    public add() {
        this.dialogVisible = true;
        this.dialogTitle = '财务信息/添加财务信息';
        this.status = '添加';
        this.comFinance = {} as ComFinanceDto;
        this.auditList = [];
    }
    // 取消
    public close() {
        this.dialogVisible = false;
        this.getFinanceList();
        this.$refs.financeForm.resetFields();
    }
    // 编辑
    public async edit(financeId: number) {
        this.dialogVisible = true;
        this.dialogTitle = '财务信息/编辑财务信息';
        this.status = '编辑';
        const res = await FinanceService.getComFinanceById(financeId);
        if (res.resCode === '0') {
            this.comFinance = res.data;
            this.auditList = res.data.comFinanceAuditList;
            this.companyName = this.auditList[0].accountantName;
        }
    }
    // 下载文件
    public downFile(reportName: string, reportUrl: string) {
        window.open(getUrl() + Api.download.url
        + '?Authorization=Bearer ' + this.$store.state.user.token
        + '&fileName=' + reportName
        + '&fileUrl=' + reportUrl);
    }
    // 删除文件
    public async delFile(id: number, index: number) {
        this.$confirm('是否删除', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(async () => {
            const res = await FinanceService.deleteComFinanceAuditById(id);
            if (res.resCode === '0') {
                this.$message.success('删除成功');
                this.auditList.splice(index, 1);
            }
        }).catch(() => {
            return false;         
        });
    }
    // 删除
    public deleteId(id: number) {
        this.$confirm('是否删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
            const res = await FinanceService.deleteComFinanceById(id);
            if (res.resCode === '0') {
                this.$message.success('删除成功');
                this.getFinanceList();
            }
        }).catch(() => {
            return false;         
        });
    }
    // 保存财务信息
    public async saveInfo() {
        this.comFinance.companyId = Number(this.$route.params.itemId);
        this.comFinance.comFinanceAuditList = this.auditList;
        this.$refs.financeForm.validate(async (valid: boolean) => {
            if (valid) {
                if (this.status === '添加') {
                    const res = await FinanceService.saveComFinance(this.comFinance);
                    if (res.resCode === '0') {
                        this.$message.success('添加成功');
                        this.dialogVisible = false;
                        this.getFinanceList();
                    }
                } else if (this.status === '编辑') {
                    const res = await FinanceService.updateComFinance(this.comFinance);
                    if (res.resCode === '0') {
                        this.$message.success('修改成功');
                        this.dialogVisible = false;
                        this.getFinanceList();
                    }
                }
            }
        });
    }
    // 财务信息列表
    public async getFinanceList() {
        const query = {
            'pageParam.pageIndex': this.pageParam.pageIndex,
            'pageParam.pageSize': this.pageParam.pageSize,
            companyId: Number(this.$route.params.itemId),
        };
        const res = await FinanceService.getComFinanceByCompanyId(query);
        if (res.resCode === '0') {
            this.data = res.data.resultData;
            this.totalCount = res.data.totalCount;
        }
    }
    // 获取审计公司名称和id
    public getName(info: CompanyName) {
        this.companyName = info.name;
        this.companyId = info.id.toString();
    }
    // 关闭企业库
    public closeCompanyDialog() {
        this.compamyDialog = false;
    }
    public onSuccessMultiple(fileIdList: string[], fileNameList: string[]) {
        fileNameList.map( (name: string, index) => {
            this.auditList.push({
                accountantId: this.companyId, // 审计公司(会计事务所id)
                companyId: Number(this.$route.params.itemId), // 工商主id
                reportName: name, // 报告名称
                financeId: 0, // 财务id
                id: 0, // id
                reportUrl: fileIdList[index], // 报告在服务器路径
                accountantName: this.companyName, // 审计公司名字
            });
        });
    }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.f-s-10 {
    font-size: 15px;
}
.ca-title {
    height: 50px;
    overflow: hidden;
    line-height: 50px;
}
.ca-title h3{
    font-weight: normal;
    font-size: 18px;
    color: #333333;
    float: left;
}
.line-h {
    line-height: 36px;
}
.addBtn {
    font-size: 22px;
    margin-top: 12px;
    margin-left: 10px;
}
.el-checkbox+.el-checkbox {
    margin-right: 10px;
}
.el-checkbox {
    color: #606266;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    margin-left: 10px;
}
.border {
    border-bottom: 1px solid #ccc;
}
</style>